<template>
	<view class="">
		<view class="top-con">
			<u-tabs :list="tabsList" :is-scroll="false" activeColor="#333333" :barStyle="barStyle" :current="current" @change="changeTabs"></u-tabs>
		</view>
	<!-- 	createDate: "2022-03-23 11:48:08"
		electricCharge: "6"
		electricChargeSlowly: "2"
		endTime: ":23:59"
		id: "300d8ba2b67740b4ad01b39f046b057e"
		serviceCharge: "1"
		serviceChargeSlowly: "1"
		startTime: "22:00" -->
		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :back-top="true" :headerHeight="50">
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<view class="item-con">
					<view class="item-d">{{item.startTime}}-{{item.endTime}}</view>
					<view>
						<!-- <text class="item-price" v-if="current==1">{{item.electricChargeSlowly}}</text>
						<text class="item-price" v-else>{{item.electricCharge}}</text> -->
						<text class="item-u" style="margin-left: 0;">充电单价:</text>
						<text class="item-price">
							￥{{
								current == 0 ? 
								Number(Number(item.electricCharge) + Number(item.serviceCharge)).toFixed(2) :
								Number(Number(item.electricChargeSlowly) + Number(item.serviceChargeSlowly)).toFixed(2)
							}}
						</text>
						<text class="item-u">起元/度</text>
					</view>
					<!-- <view class="">
						<text class="item-title">
							充电单价:￥{{current==0? Number(item.electricCharge)+ Number(item.serviceCharge):Number(item.electricChargeSlowly)+Number(item.serviceChargeSlowly)}}
						</text>
					</view> -->
					<view class="">
						   <!-- let val2=this.current==0?item.serviceCharge:item.serviceChargeSlowly; -->
						<text class="item-title">
							电费:￥{{item.electricCharge}}
						</text>
						<text class="item-title" style="margin-left: 50rpx;" v-if="current==1">服务费:￥{{item.serviceChargeSlowly}}</text>
						<text class="item-title" style="margin-left: 50rpx;" v-else>服务费:￥{{item.serviceCharge}}</text>
					</view>
				</view>
			</view>
		</s-pull-scroll>
	</view>
</template>
<script>
export default {
	data() {
		return {
			barStyle: {
				background: '#2f9e25'
			},
			current: 0,
			dataList:[],
			tabsList: [{ name: '直流桩' }, { name: '交流桩' }]  //  直流快充
		};
	},
	onLoad() {
		this.dataList=getApp().globalData.activeList;
	},
	onUnload() {
		getApp().globalData.activeList=[];
	},
	methods: {
		changeTabs(index) {
			console.log(index);
			this.current = index;
		}
	}
};
</script>
<style>
page {
	background: #ffffff;
}
</style>
<style scoped lang="scss">
.top-con {
	box-shadow: 0px 5rpx 30rpx 0px rgba(112, 112, 112, 0.13);
}
.item {
	padding: 0 30rpx;
}
.item-con {
	padding: 30rpx 0;
	border-bottom: 1rpx solid rgba(218, 218, 218, 0.18);
}
.item-title {
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #bababa;
}
.item-d {
	font-size: 28rpx;
	font-weight: bold;
	color: #000000;
}
.item-price {
	font-size: 36rpx;
	font-weight: bold;
	color: #fe642b;
}
.item-c {
	font-size: 22rpx;
	font-weight: 500;
	color: #666666;
}
.item-u {
	font-size: 22rpx;
	color: #333333;
	font-weight: 500;
	margin-left: 10rpx;
}
</style>
